<!DOCTYPE html>
<html lang="en">
	<head>
		<title>GLSL Sandbox Gallery</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<style>
			body {
				background-color: #000000;
				font: 13px Tahoma, Arial, Helvetica, sans-serif;
				margin: 3em 4em;
				color: #888;
			}
			a{
				color: #aaa;
				text-decoration: none;
				border-bottom: 1px solid #444;
			}
			a:hover{
				color: #009DE9;
				border-bottom: 1px solid #009DE9;
			}
			
			h1, h1 a, h2{
				color: #009DE9;
				font: 28px Tahoma, Arial, Helvetica, sans-serif;
				font-weight: normal;
				margin-bottom: 7px;
			}
			h2{ 
				font-size: 22px;
				margin-top: 2em;
			}
			#gallery{
				margin-top: 4em;
			}
			#gallery>a{
				border: none;
			}
			#gallery img{
				margin-right: 2em;
				margin-bottom: 2em;
				width: 200px;
				height: 100px;
				border: 1px solid #212121;
			}
			#gallery img:hover{
				box-shadow: 0px 0px 24px 10px #263D65;
				border: 1px solid #316FAE;
			}
			label{
				display: block;
				margin-top: 1.4em;
				margin-bottom: 0.6em;
				font-size: 14px;
				color: #009DE9;
			}
			input, textarea{
				background: #222;
				font-size: 14px;
				color: #ccc;
				border: none;
				padding: 5px 10px;
				outline: none;
				cursor: pointer;
			}
			input[type=submit]:hover{
				color: #009DE9;
			}
		</style>
		<script>function $(id,m){document.getElementById(id).style.display= m?'block':'none';}</script>
	</head>
	<body>

<div id="header">		
<h1><a href="/">GLSL Sandbox</a></h1>
<a href="/e">Create new effect!</a> &nbsp;&nbsp;/&nbsp;
<a href="https://github.com/mrdoob/glsl-sandbox">github</a> &nbsp;&nbsp;/&nbsp;
gallery by <a href="http://twitter.com/thevaw">@thevaw</a> and <a href="http://twitter.com/feiss">@feiss</a> &nbsp;/&nbsp; editor by <a href="http://twitter.com/mrdoob">@mrdoob</a>, <a href="http://twitter.com/mrkishi">@mrkishi</a>, <a href="http://twitter.com/p01">@p01</a>, <a href="http://twitter.com/alteredq">@alteredq</a>, <a href="http://twitter.com/kusmabite">@kusmabite</a> and <a href="http://twitter.com/emackey">@emackey</a>
</div>

<div id="gallery">

<% effects.each do |effect| %>
	<a href='/e#<%= effect['_id'] %>.<%= effect['versions'].length-1 %>'><img src='<%= image(effect) %>'></a>
<% end %>

</div>

<div id="paginate">
<% if previous_page %>
<a href='/?page=<%= previous_page %>'>Previous page</a>

<% if next_page %>
&nbsp;&nbsp;
<% end %>

<% end %>

<% if next_page %>
<a href='/?page=<%= next_page %>'>Next page</a>
<% end %>
</div>

</body>
</html>
